import Qt 4.7
import "JSONListModel"
//import "main.js" as MainJS

Item {
    id: mainWindow
    property alias icon_list: iconPageList.model

    // icon list model
    JSONListModel {
        id: iconPageList
        json: sysUtils.iconPageLists
    }

    // background image
    Image {
        id: background
        fillMode: Image.TileHorizontally
        x: listView.contentX <= 0 ? 0 : -listView.contentX / icon_list.count
        width: Math.max(listView.contentWidth, parent.width)
        anchors.verticalCenter: parent.verticalCenter
        source: sysUtils.background
    }

    // icon list page
    ListView {
        id:listView
        anchors.fill: parent
        focus: true
        highlightRangeMode: ListView.StrictlyEnforceRange
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        model: icon_list
        delegate: Component {
            Item {
                // 这里不能用anchors.fill=parent来充满屏幕
                width: listView.width
                height: listView.height
                Text {
                    id: pageName
                    y: 0
                    anchors.horizontalCenter: parent.horizontalCenter
                    height: 40
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: name
                    font.pixelSize: 24
                }
                Rectangle {
                    color: "#80C0F0C0"
                    anchors.horizontalCenter: parent.horizontalCenter
                    height: 60
                    y: -10
                    width: pageName.width + 40
                    radius: 10
                }

                // icon list grid
                Grid {
                    anchors.fill: parent
                    anchors.margins: 60
                    columns: 6; spacing: 40
                    Repeater {
                        model: iconList
                        delegate: IconElement {
                            id: iconItem
                            iconSource: icon
                            nameText: name
                            textColor: "white"
                            shadowOffset: 3
                            shadowColor: "black"
                            onPressed: listView.interactive = false;
                            onReleased: listView.interactive = true;
                            onClicked: {
                                console.log("Run "+exec+" with "+args);
                                if(exec != "_inner__qmlviewer")
                                    sysUtils.run(exec, args);
                                else
                                    loader.source = args;
                                listView.interactive = true;
                            }
                        }//IconElement
                    }//Repeater
                }//Grid
            }//Item
        }//Component
    }//ListView

    /*底部的页数指示器*/
    Repeater {
        id: repeater
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 20
        model: icon_list.count
        Rectangle {
            id: repeaterElement
            color: listView.currentIndex == index ? "white" : "red"
            border.width: listView.currentIndex == index ? 2 : 0
            border.color: "red"
            width: 10; height: 10;radius: 5
            anchors.bottom: mainWindow.bottom
            anchors.bottomMargin: 5
            x: (mainWindow.width - (repeater.model * (width + 5))) / 2 + (width + 5) * index
        }
    }
    // qml viewer
    Item {
        id: qmlviewer
        anchors.fill: parent
        visible: loader.source != ""
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("clicked");
                loader.source = "";
            }
        }
        Rectangle {
            id: loaderBox
            gradient: Gradient {
                GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.4) }
                GradientStop { position: 0.0; color: Qt.rgba(1,1,1,0.4) }
            }
            radius: 10
            width: 640
            height: 480
            anchors.centerIn: parent
            MouseArea {
                anchors.fill: loader
            }
            Loader {
                id: loader
                anchors.centerIn: parent
                clip: true
                onLoaded: {
                    if(loader.item.width >= 640) {
                        loader.item.width = 620;
                        loaderBox.width = 640;
                    } else {
                        loaderBox.width = loader.item.width + 20;
                    }
                    if(loader.item.height >= 480) {
                        loader.item.height = 460;
                        loaderBox.height = 480;
                    } else {
                        loaderBox.height = loader.item.height + 20;
                    }
                }
            }
        }
    }
}
